<template>
  <div>
    <!-- 基本信息 -->
    <basic-container shadow="hover">
      <crud-title :title="'基本信息'" shadow="hover" />
      <avue-form v-loading="loading" ref="form" :option="option" v-model="form">
        <template slot="supplierName">
          <el-input class="pointer" v-model="form.supplierName" @focus="selectSupplier" placeholder="请选择" readonly>
            <i slot="suffix" class="el-icon-search"></i>
          </el-input>
        </template>
        <template slot="materialCategory">
          <material-classify v-model="form.materialCategory" />
        </template>
      </avue-form>
    </basic-container>
    <!-- 外观检查 -->
    <div v-for="(item, index) in list" :key="index">
      <info ref="infoForm" :title="item.title" :info.sync="item.cc" />
    </div>
    <!-- <info ref="infoForm" :title="'xxx'" :info.sync="list[0].cc" /> -->
  </div>
</template>

<script>
import CrudTitle from '@/components/base/title'
import { option, supplierOption } from '@/option/tenant/supplier/sample-form'
import info from '@/views/tenant/supplier/sample/components/info'
export default {
  name: 'SampleForm',
  components: { CrudTitle, info },
  props: ['type'],
  provide() {
    return {
      type: this.type
    }
  },
  data() {
    return {
      form: {},
      list: [
        { title: 'a', cc: { aa: {} } },
        { title: 'b', cc: { bb: {} } },
        { title: 'c', cc: { cc: {} } },
        { title: 'd', cc: { dd: {} } }
      ],
      cc: {},
      loading: false,
      option: option.call(this)
    }
  },
  watch: {
    list: {
      handler(val) {
        console.log(val)
      },
      deep: true
    }
  },
  methods: {
    selectSupplier() {
      this.$quickModal({
        title: '选择供应商',
        width: '80%',
        componentIsTag: true,
        component: 'suppliers',
        props: {
          multiple: false,
          columns: supplierOption
        },
        on: {
          change: row => {
            console.log(row)
          }
        }
      })
    },
    handleSave() {
      this.list.map((v, i) => {
        const flag = this.$refs.infoForm[i].validateForm()
        console.log(flag)
      })

      // if (flag) {
      //   this.$message.success('dfsdfsdfsd')
      // } else {
      //   this.$message.error('保全信息不完整，请继续填写完整')
      // }
    }
  }
}
</script>

<style></style>
